<template>
  <div class="edit">
    <div>
      <el-button type="text" @click="back">返回</el-button>
    </div>
    <div class="dialog">
      <el-dialog
        title="住客姓名"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div>
          <el-radio v-model="radio" :label="1">自定义</el-radio>
          <el-radio v-model="radio" :label="2">复制</el-radio>
        </div>
        <div class="custom" v-show="radio == 1">
          <el-form
            :inline="true"
            :model="dialog_custom"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-input
                v-model="dialog_custom"
                placeholder="房客姓名"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="copy" v-show="radio == 2">
          <div class="copy_search">
            <el-form
              :inline="true"
              v-model="copyInline"
              class="demo-form-inline"
            >
              <el-form-item label="">
                <el-input
                  v-model="copyInline.admin"
                  placeholder="请输入用户账号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="copySubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="copy_list">
            <el-table :data="copyTableData" stripe style="width: 100%">
              <el-table-column prop="id" label="ID" width=""> </el-table-column>
              <el-table-column prop="username" label="用户账号" width="">
              </el-table-column>
              <el-table-column prop="homeaddress" label="家庭住址">
              </el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.type == 1">管理员</span>
                  <span v-if="scope.row.type == 2">普通用户</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <img
                    style="cursor: pointer"
                    width="20px; "
                    src="@/assets/img_index/add.png"
                    alt=""
                    @click="openMessage(scope.row, scope.$index)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="copy_page" style="text-align: right">
            <el-pagination
              @size-change="copyHandleSizeChange"
              @current-change="copyHandleCurrentChange"
              :current-page="1"
              :page-sizes="[7, 10, 20, 30]"
              :page-size="100"
              layout="total,sizes, prev, pager, next"
              :total="copyTotal"
            >
            </el-pagination>
          </div>
          <div class="copy_title">
            <h2>已选结果</h2>
          </div>
          <div class="copy_list2">
            <el-table :data="copyTableData2" stripe style="width: 100%">
              <el-table-column prop="id" label="ID" width=""> </el-table-column>
              <el-table-column prop="username" label="用户账号" width="">
              </el-table-column>
              <el-table-column prop="homeaddress" label="家庭住址">
              </el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.type == 1">管理员</span>
                  <span v-if="scope.row.type == 2">普通用户</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作">
                <!-- 加号圆点 -->
                <template slot-scope="scope">
                  <span
                    style="
                      display: block;
                      width: 16px;
                      height: 16px;
                      color: white;
                      border-radius: 50%;
                      background-color:red
                      text-align:center
                      
                    "
                    @click="spliceMessage(scope.row, scope.$index)"
                    >---</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="copy_btns"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" type="primary"
            >取 消</el-button
          >
          <el-button type="primary" v-if="radio == '1'" @click="dialogTrue"
            >确 定</el-button
          >
          <el-button v-if="radio == '2'" @click="select" type="primary"
            >选择</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="medium"
      >
        <div class="title">房号信息</div>
        <div class="box">
          <el-form-item label="单元名称" prop="unitname">
            <el-input v-model="ruleForm.unitname"></el-input>
          </el-form-item>
          <el-form-item label="幢号" prop="buildnum">
            <el-input v-model="ruleForm.buildnum"></el-input>
          </el-form-item>
          <el-form-item label="楼层号" prop="storeynum">
            <el-input v-model="ruleForm.storeynum"></el-input>
          </el-form-item>
          <el-form-item label="房号" prop="homenum">
            <el-input v-model="ruleForm.homenum"></el-input>
          </el-form-item>
          <el-form-item label="住客姓名" prop="homename">
            <el-input
              v-model="ruleForm.homename"
              @focus="dialogVisible = true"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="familystatus">
            <el-select
              v-model="ruleForm.familystatus"
              placeholder="请选择活动区域"
            >
              <el-option label="已入住" :value="1"></el-option>
              <el-option label="未入住" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋信息">
            <el-input type="textarea" v-model="ruleForm.homemessage"></el-input>
          </el-form-item>
          <el-form-item label="家庭成员">
            <el-input
              type="textarea"
              v-model="ruleForm.homesuggestion"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>
        <div class="title">智能设备</div>
        <div class="box">
          <el-form-item label="洗衣机数量" prop="washnum">
            <el-input v-model="ruleForm.washnum"></el-input>
          </el-form-item>
          <el-form-item label="WI-FI名称" prop="wifiname">
            <el-input v-model="ruleForm.wifiname"></el-input>
          </el-form-item>
          <el-form-item label="空调数量" prop="airnum">
            <el-input v-model="ruleForm.airnum"></el-input>
          </el-form-item>
          <el-form-item label="智能设备状态" prop="smartstatus">
            <el-select
              v-model="ruleForm.smartstatus"
              placeholder="请选择活动区域"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="title">家居设备</div>
        <div class="box">
          <el-form-item label="书桌数量" prop="homedesk">
            <el-input v-model="ruleForm.homedesk"></el-input>
          </el-form-item>
          <el-form-item label="椅子数量" prop="homechair">
            <el-input v-model="ruleForm.homechair"></el-input>
          </el-form-item>
          <el-form-item label="衣橱数量" prop="homeclothes">
            <el-input v-model="ruleForm.homeclothes"></el-input>
          </el-form-item>
          <el-form-item label="家居设备状态" prop="homestatus">
            <el-select
              v-model="ruleForm.homestatus"
              placeholder="请选择活动区域"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="btns" style="text-align: right">
          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')"
              >保存</el-button
            >
            <el-button type="primary" @click="back">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id_and_h_id: {
        id: "",
        h_id: "",
      },
      //对话框搜索
      copyInline: {
        admin: "",
      },
      // 对话框分页
      copyPageNumber: 0,
      copyPageSize: 7,
      copyTotal: 0,
      //对话框表格数据
      copyTableData: null,
      copyTableData2: [],
      //对话框控制
      dialogVisible: false,
      radio: 1, //对话框单选
      dialog_custom: null,
      dialog_copy: null,
      //表单数据
      ruleForm: {
        // airnum: 22,
        // buildnum: "222",
        // communityname: "23232",
        // createtime: "2025-02-15T08:00:29.000Z",
        // familystatus: 1,
        // homechair: 22,
        // homeclothes: 22,
        // homedesk: 222,
        // homemessage: "awdwad",
        // homename: "222",
        // homenum: 22,
        // homestatus: 1,
        // homesuggestion: "2",
        // id: 737,
        // smartstatus: 1,
        // storeynum: 222,
        // unitcontext: "<p>34234</p>",
        // unitname: "43243",
        // unitnum: 3,
        // unitstatus: 2,
        // washnum: 222,
        // wifiname: "22",
      },
      rules: {
        unitname: [
          { required: true, message: "请输入单元名称", trigger: "blur" },
        ],
        buildnum: [{ required: true, message: "请输入幢号", trigger: "blur" }],
        storeynum: [
          { required: true, message: "请输入楼层号", trigger: "blur" },
        ],
        homenum: [{ required: true, message: "请输入房号", trigger: "blur" }],
        homename: [
          { required: true, message: "请输入住客姓名", trigger: "blur" },
        ],
        familystatus: [
          { required: true, message: "请输入状态", trigger: "blur" },
        ],
        washnum: [
          { required: true, message: "请输入洗衣机数量", trigger: "blur" },
        ],
        wifiname: [
          { required: true, message: "请输入WI-FI名称", trigger: "blur" },
        ],
        airnum: [
          { required: true, message: "请输入空调数量", trigger: "blur" },
        ],
        smartstatus: [
          { required: true, message: "请输入智能设备状态", trigger: "blur" },
        ],
        homedesk: [
          { required: true, message: "请输入书桌数量", trigger: "blur" },
        ],
        homechair: [
          { required: true, message: "请输入椅子数量", trigger: "blur" },
        ],
        homeclothes: [
          { required: true, message: "请输入衣橱数量", trigger: "blur" },
        ],
        homestatus: [
          { required: true, message: "请输入设备状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //复制表2选择按钮
    select() {
      this.$axios
        .post("house/updateUserHid", {
          id: this.id_and_h_id.id,
          h_id: this.id_and_h_id.h_id,
          token: sessionStorage.getItem("token"),
        })
        .then(() => {
          console.log("更新成功");
          this.dialogVisible=false
        });
    },
    //删除复制表2数据
    spliceMessage(row, index) {
      this.copyTableData2.splice(index, 1);
    },
    //对话表格弹出警告
    openMessage(row, index) {
      if (row.homeaddress == null) {
        // console.log(row,'row')
        this.id_and_h_id.h_id = row.h_id;
        this.copyTableData2.push(row);
        console.log(this.copyTableData2);
      } else {
        this.$notify({
          title: "提示",
          message: "目前 【admin】 已录入房屋信息，请勿重复操作",
          type: "warning",
        });
      }
    },
    //初始化复制表格数据
    getCopyData() {
      this.$axios
        .get("users/getUserList", {
          params: {
            username: "",
            currPage: this.copyPageNumber,
            pageNum: this.copyPageSize,
          },
        })
        .then((res) => {
          this.copyTableData = res.data.data;
          this.copyTotal = res.data.total;
        });
    },
    //对话框分页
    copyHandleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.copyPageSize = val;
      this.getCopyData();
    },
    copyHandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.copyPageNumber = val - 1;
      this.getCopyData();
    },
    //对话框复制查询
    copySubmit() {
      this.$axios
        .get("users/getUserList", {
          params: {
            username: this.copyInline.admin,
            currPage: this.copyPageNumber,
            pageNum: this.copyPageSize,
          },
        })
        .then((res) => {
          this.copyTableData = res.data.data;
          this.copyTotal = res.data.total;
        });
    },
    //对话框赋值
    dialogTrue() {
      this.ruleForm.homename = this.dialog_custom;
      this.dialogVisible = false;
    },
    //对话框控制
    handleClose(done) {
      done();
    },
    //初始化表单数据
    getFormData() {
      this.$axios
        .get("house/getDetailId", {
          params: {
            id: this.$route.query.editId,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res)
          this.ruleForm = res.data[0];
          // console.log(this.ruleForm, "ruleform");
        });
    },
    //要提交的数据
    //     id: 737
    // unitname: 43243
    // buildnum: 222
    // storeynum: 222
    // homenum: 22
    // homename: 222
    // homestatus: 1
    // homemessage: awdwad
    // homesuggestion: 2
    // airnum: 22
    // wifiname: 22
    // washnum: 222
    // smartstatus: 1
    // homedesk: 222
    // homechair: 22
    // homeclothes: 22
    // familystatus: 1
    // h_id: 737
    // homeaddress: 滨江壹号4324322222
    // token:
    //表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证通过提交数据
          this.$confirm("确定修改文件?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$axios.post("house/updatenumList", {
                id: this.$route.query.editId,
                unitname: this.ruleForm.unitname,
                buildnum: this.ruleForm.buildnum,
                storeynum: this.ruleForm.storeynum,
                homenum: this.ruleForm.homenum,
                homename: this.ruleForm.homename,
                homestatus: this.ruleForm.homestatus,
                homemessage: this.ruleForm.homemessage,
                homesuggestion: this.ruleForm.homesuggestion,
                airnum: this.ruleForm.airnum,
                wifiname: this.ruleForm.wifiname,
                washnum: this.ruleForm.washnum,
                smartstatus: this.ruleForm.smartstatus,
                homedesk: this.ruleForm.homedesk,
                homechair: this.ruleForm.homechair,
                homeclothes: this.ruleForm.homeclothes,
                familystatus: this.ruleForm.familystatus,
                h_id: this.ruleForm.h_id,
                homeaddress: this.ruleForm.homeaddress,
                token: sessionStorage.getItem("token"),
              });
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.$router.go(-1);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //返回
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    this.id_and_h_id.id = this.$route.query.editId;
    this.getFormData();
    this.getCopyData();
  },
};
</script>

<style lang="scss" scoped>
.edit::v-deep {
  .dialog {
    .custom {
      .el-form {
        padding-top: 10px;
        .el-form-item {
          .el-form-item__content {
            .el-input {
              input {
                width: 800px !important;
              }
            }
          }
        }
      }
    }
  }
  .form {
    .title {
      border-left: 5px solid #20a0ff;
      padding-left: 10px;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      .el-form-item {
        .el-form-item__content {
          margin-left: 120px !important;
        }
        .el-form-item__label {
          width: 110px !important ;
        }
        .el-input {
          width: 500px;
        }
        .el-textarea__inner {
          width: 1232px;
          height: 120px;
        }
      }
    }
    .btns {
      padding-right: 66px;
    }
  }
}
</style>